import { View, Text, StyleSheet,Button } from 'react-native';
import { Circle, 
  Svg, 
  Rect,
  Path,
  Line,
  Text as Text2,
  G,
 } from 'react-native-svg';

import React, { useState, useEffect } from 'react';
import Animated, { useSharedValue, useAnimatedStyle, useAnimatedProps,withSpring,withTiming,withRepeat,Easing } from 'react-native-reanimated';
const AnimatedCircle = Animated.createAnimatedComponent(Circle);
const AnimatedGroup = Animated.createAnimatedComponent(G);

const CircularProgressBar = ({ size = 100, strokeWidth = 10, progress = 50, color = '#3498db' }) => {
    const radius = (size - strokeWidth) / 2;
    const circumference = 2 * Math.PI * radius;
    const strokeDashoffset = circumference - (progress / 100) * circumference;

    return (
        <View style={styles.container}>
            <Svg width={size} height={size}>
                {/* Background Circle */}
                <Circle
                    cx={size / 2}
                    cy={size / 2}
                    r={radius}
                    stroke="#e6e6e6"
                    strokeWidth={strokeWidth}
                    fill="none"
                />
                {/* Progress Circle */}
                <Circle
                    cx={size / 2}
                    cy={size / 2}
                    r={radius}
                    stroke={color}
                    strokeWidth={strokeWidth}
                    fill="none"
                    strokeDasharray={`${circumference} ${circumference}`}
                    strokeDashoffset={strokeDashoffset}
                    strokeLinecap="round"
                    rotation="-90"
                    origin={`${size / 2}, ${size / 2}`}
                />
            </Svg>
            <View style={styles.textContainer}>
                <Text style={styles.text}>{`${progress}%`}</Text>
            </View>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        justifyContent: 'center',
        alignItems: 'center',
    },
    textContainer: {
        position: 'absolute',
        justifyContent: 'center',
        alignItems: 'center',
    },
    text: {
        fontSize: 18,
        fontWeight: 'bold',
    },
    box: { width: 200, height: 200, backgroundColor: 'pink' },
    svg: {
      height: 250,
      width: '100%',
    },
});

export default CircularProgressBar;

export const BasicCircle = () => {
  return (
    <View style={styles.container}>
      <Svg height="200" width="200">
        <Circle cx="100" cy="100" r="50" stroke="tomato" strokeWidth="5" fill="gold" />
        <Circle cx="150" cy="150" r="25" stroke="gold" strokeWidth="5" fill="red" />
        <Rect x="60" y="100" width="50" height="80" rx="0" ry="0" fill="darkblue" />
      <Path d="M10 80 C 40 10, 65 10, 90 80" fill="transparent" stroke="blue" strokeWidth="5" />
      <Line x1="10" y1="10" x2="90" y2="90" stroke="red" strokeWidth="5" />
      <Text2 x="10" y="0" fontSize="20" fill="black">Hello SVG10</Text2>
      </Svg>
    </View>
  );
};


export const CircularProgressBar2 = ({ progress = 50 }) => {
    const radius = 50;
    const strokeWidth = 6;
    const  w= 140/3.5;
    const circunference = 2 * Math.PI * radius;
    const offset = circunference - (progress / 100) * circunference;
  
    return (
      <View style={styles.container}>
        <Svg height="120" width="120">
          <Circle
            cx="60"
            cy="60"
            r={radius}
            stroke="#00000000"
            strokeWidth={strokeWidth}
            fill="none"
          />
          <Circle
            cx="60"
            cy="60"
            r={radius}
            stroke="#2c72e5"
            strokeWidth={strokeWidth}
            fill="none"
            strokeDasharray={circunference}
            strokeDashoffset={offset}
            strokeLinecap="round"
          />
        </Svg>
      </View>
    );
  };


  export const Reanimated01 = ({ progress = 50 }) => {
    const translationX = useSharedValue(0);
    const width = useSharedValue(100);

    const animatedStyle = useAnimatedStyle(() => ({
      transform: [{ translateX: translationX.value }],
    }));
  
    const startAnimation = () => {
      width.value = withSpring(width.value + 50,{duration:3000});
      // translationX.value = withTiming(200, { duration: 500 });
    };
    return <View style={styles.container}>
      <Animated.View 
       style={{
        width,
        height: 100,
        backgroundColor: 'gold',
      }}
      // style={[styles.box, animatedStyle]}
       />
      <Button title="Move Box" onPress={startAnimation} />
    </View>
  };


  export const Reanimated02 = ({ progress = 50 }) => {

    const translateY = useSharedValue<number>(0);

    const handlePress = () => {
      translateY.value += 50;
    };
  
    const animatedStyles = useAnimatedStyle(() => ({
      transform: [{ translateY: withSpring(translateY.value * 1) }],
    }));
  
    return <View style={styles.container}>
       <Animated.View style={[styles.box, animatedStyles]} />
      <Button title="Move Box" onPress={handlePress} />
    </View>
  };


  export const Reanimated03 = ({ progress = 50 }) => {
    const r = useSharedValue<number>(0);

  const handlePress = () => {
    r.value += 5;
  };

  const animatedProps = useAnimatedProps(() => ({
    r: withTiming(r.value),
    cx: withTiming(r.value),
    cy: withTiming(r.value),
  }));
    return <View style={styles.container}>
    <Svg style={styles.svg}>
      <AnimatedCircle
        fill="#b58df1"
        animatedProps={animatedProps}
      />
    </Svg>
    <Button onPress={handlePress} title="Click me" />
  </View>
  };


  export const RotationExample = () => {

    const radius = 40;
    const circunference = 2 * Math.PI * radius;
    const offset = circunference - (50 / 100) * circunference;

    const rotation = useSharedValue(0);
  
    const animatedStyle = useAnimatedStyle(() => ({
      transform: [{ rotate: `${rotation.value}deg` }],
    }));


    React.useEffect(() => {
      rotation.value = withRepeat(
        withTiming(rotation.value+360, { duration: 1000,   easing: Easing.linear,}),
        -1,
        false
      );
      // progress.value = withRepeat(
      //   withTiming(100, { duration: 1000,   easing: Easing.linear,}),
      //   -1,
      //   true
      // );

    })

  
    const startAnimation = () => {
      rotation.value = withTiming(rotation.value + 360, { duration: 1000,   easing: Easing.linear,});
    };
  
    return (
      <View style={styles.container}>
        <Animated.View style={[styles.box, animatedStyle]} >
        <Svg height="200" width="200" style={{ transform: [{ rotate: `${rotation.value}deg` }] }}>
        <Circle
          cx="50%"
          cy="50%"
          r= {radius}
          stroke="#2c72e5"
          strokeWidth="6"
          fill="gold"
          strokeDasharray={circunference}
          strokeLinecap="round"
          strokeDashoffset={offset}
        // animatedProps={animatedProps}
      />
      </Svg>
        </Animated.View>
      </View>
    );
  };
  
  export const Reanimated04 = ({ progress = 50 }) => {
    const width=200;
    const duration = 2000;
    const defaultAnim = useSharedValue<number>(width / 2 - 160);
    const linear = useSharedValue<number>(width / 2 - 160);
  
    const animatedDefault = useAnimatedStyle(() => ({
      transform: [{ translateX: defaultAnim.value }],
    }));
    const animatedChanged = useAnimatedStyle(() => ({
      transform: [{ translateX: linear.value }],
    }));

    React.useEffect(() => {
      linear.value = withRepeat(
        withTiming(-linear.value, {
          duration,
          easing: Easing.linear,
        }),
        -1,
        true
      );

      defaultAnim.value = withRepeat(
        withTiming(-defaultAnim.value, {
          duration,
        }),
        10,
        true
      );
    })

return <View style={styles.container}>
      <Animated.View style={[styles.box, animatedDefault]}>
        <Text style={styles.text}>inout</Text>
      </Animated.View>
      <Animated.View style={[styles.box, animatedChanged]}>
        <Text style={styles.text}>linear1</Text>
      </Animated.View>
    </View>
  };



  // 动态的圆形进度条组件，接受size作为参数
export const AnimatedCircle2 = ({ size = 120 }) => {
    const [progress, setProgress] = useState(0);
  
    useEffect(() => {
      const interval = setInterval(() => {
        setProgress((prev) => (prev >= 100 ? 0 : prev + 1));
      }, 100);
  
      return () => clearInterval(interval);
    }, []);
  
    const radius = size / 2; // 根据传入的size调整圆形的半径
    const strokeWidth = 10;
    const circunference = 2 * Math.PI * radius;
    const offset = circunference - (progress / 100) * circunference;
  
    return (
      <View style={styles.container}>
        <Svg height={size} width={size}>
          <Circle
            cx={size / 2}
            cy={size / 2}
            r={radius}
            stroke="#e6e6e6"
            strokeWidth={strokeWidth}
            fill="none"
          />
          {/* <Animated.Circle
            cx={size / 2}
            cy={size / 2}
            r={radius}
            stroke="#3498db"
            strokeWidth={strokeWidth}
            fill="none"
            strokeDasharray={circunference}
            strokeDashoffset={offset}
            strokeLinecap="round"
          /> */}
        </Svg>
      </View>
    );
  };


